<template>
  <div class="History">
    <Head msg="浏览记录"></Head>
    <div class="classify-main">
      <div
        :class="classify == 'goods' ? 'classify-active' : ''"
        @click="classifyclick('goods')"
      >
        新车
      </div>
      <div
        :class="classify == 'article' ? 'classify-active' : ''"
        @click="classifyclick('article')"
      >
        文章
      </div>
    </div>
    <div class="scroll-body">
      <cube-scroll
        ref="scroll"
        :data="info"
        :options="options"
        @pulling-up="listload"
      >
        <div v-if="classify == 'article'" class="article-main">
          <div
            class="article-list"
            v-for="item in info"
            :key="item.object_id"
            @click="toarticledetail(item.object_id)"
          >
            <img
              :src="
                item.photo
                  ? item.photo
                  : publicPath + 'img/icons/icon-article-default.png'
              "
              class="article-pic"
            />
            <div class="article-content">
              <div class="article-title">{{ item.title }}</div>
              <div class="article-information">
                <!--                                <div>作者：{{item.author}}</div>-->
                <!--                                <div>评论：{{item.comment}}</div>-->
                <div>时间：{{ item.create_time }}</div>
                <div
                  @click.stop="viewDel('article', item.object_id)"
                  style="color: red"
                >
                  删除
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-if="classify == 'goods'" class="car-main">
          <div class="car-list" v-for="item in info" :key="item.object_id">
            <img :src="item.photo" class="car-pic" />
            <div class="car-content">
              <div class="car-title">{{ item.title }}</div>
              <div class="car-type">
                外观颜色：
                <span class="car-type-name">{{ item.setparam.out_color }}</span>
              </div>
              <div class="car-type">
                内饰颜色：
                <span class="car-type-name">{{ item.setparam.in_color }}</span>
              </div>
              <div class="car-type">
                排放标准：
                <span class="car-type-name">{{ item.setparam.emission }}</span>
              </div>
              <div class="car-type">
                车辆类型：
                <span class="car-type-name">{{ item.setparam.type }}</span>
              </div>
              <div class="car-type">
                车所在地：
                <span class="car-type-name">{{ item.setparam.area }}</span>
              </div>
              <!--                            <div class="car-type">车源有效期限：<span class="car-type-name">{{item.setparam.end_time}}</span></div>-->
              <div class="car-type">
                指导价格：
                <span class="car-type-name">{{ item.market_price }}万</span>
              </div>
              <div class="car-type">
                经销商价：
                <span class="car-type-name">{{ item.goods_price }}万</span>
              </div>
            </div>
            <div
              class="car-detail-del"
              @click.stop="viewDel('goods', item.object_id)"
            >
              删除
            </div>
            <div class="car-detail-btn" @click="tocardetail(item.object_id)">
              查看汽车详情
            </div>
          </div>
        </div>
        <Notice msg="暂无数据" :notice="info.length"></Notice>
      </cube-scroll>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator';
import Sence from '../sence/Sence';
// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import Head from '@/components/Head.vue';
import Notice from '@/components/Notice.vue';

@Component({
  components: {
    Head,
    Notice,
  },
})
export default class History extends Sence {
  private publicPath: string = process.env.BASE_URL;
  public classify: string = 'goods'; //当前选择分类
  public page: number = 1;
  public size: number = 10;
  public info: any = [];
  public options: object = {
    pullUpLoad: true,
  }; //上拉加载

  public mounted(): void {
    this.goodsLog();
  }

  //分类切换
  public classifyclick(data: string): void {
    this.classify = data;
    this.page = 1;
    this.info = [];
    this.options = {
      pullUpLoad: true,
    };
    if (data == 'article') {
      this.articleLog();
    } else {
      this.goodsLog();
    }
  }

  //文章阅读记录
  public articleLog(): void {
    this.post('api/v1/viewLog', {
      object_name: 'article',
      page: this.page,
      size: this.size,
    }).then((res: any) => {
      this.info = [...this.info, ...res.data.list];
      if (res.data.list.length < this.size) {
        this.options = {
          pullUpLoad: false,
        };
      }
    });
  }

  //商品阅读记录
  public goodsLog(): void {
    this.post('api/v1/viewLog', {
      object_name: 'goods',
      page: this.page,
      size: this.size,
    }).then((res: any) => {
      this.info = [...this.info, ...res.data.list];
      this.page += 1;
      if (res.data.list.length < this.size) {
        this.options = {
          pullUpLoad: false,
        };
      }
    });
  }

  //上拉加载事件
  public listload(): void {
    if (this.classify == 'article') {
      this.articleLog();
    } else {
      this.goodsLog();
    }
  }

  //前往文章详情
  public toarticledetail(id: number): void {
    this.$router.push(`/articledetail?id=${id}`);
  }

  //前往汽车详情
  public tocardetail(id: number): void {
    this.$router.push(`/cardetail?id=${id}`);
  }

  // 删除记录
  public viewDel(name: string, id: number): void {
    this.post('api/v1/viewDel', { object_name: name, object_id: id }).then(
      (res: any) => {
        this.toast('删除成功！');
      }
    );
    this.classifyclick(name);
  }
}
</script>

<style scoped lang="stylus">
* {
  box-sizing: border-box;
}

.login-title {
  height: 80px;
  text-align: center;
  background: #4876ff;
  color: white;
  font-weight: bold;
  font-size: 16px;
  line-height: 80px;
}

.classify-main {
  display: flex;
  flex-direction: row;

  > div {
    width: 50vw;
    text-align: center;
    height: 37px;
    line-height: 37px;
    font-weight: bold;
    border-bottom: 3px solid #ccc;
  }

  .classify-active {
    color: #4876ff;
    border-bottom: 3px solid #4876ff;
  }
}

.scroll-body {
  height: calc(100vh - 40px - 45px);
}

.car-main {
  display: flex;
  flex-direction: column;

  .car-list {
    position: relative;
    padding: 10px;
    display: flex;
    flex-direction: row;
    border-bottom: 3px solid #ccc;

    .car-pic {
      display: block;
      width: 20vw;
      height: 15vw;
    }

    .car-detail-btn {
      height: 25px;
      line-height: 27px;
      position: absolute;
      right: 10px;
      bottom: 10px;
      background: red;
      color: white;
      width: 28vw;
      font-weight: bold;
      font-size: 12px;
      box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.24), inset 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }

    .car-detail-del {
      height: 25px;
      line-height: 27px;
      position: absolute;
      right: 10px;
      bottom: 45px;
      background: red;
      color: white;
      width: 28vw;
      font-weight: bold;
      font-size: 12px;
      box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.24), inset 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }

    .car-content {
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .car-title {
        text-align: left;
        font-size: 18px;
        font-weight: bold;
        color: #4876ff;
      }

      .car-type {
        margin-top: 8px;
        color: #bbb;
        font-size: 14px;

        .car-type-name {
          color: black;
          font-weight: bold;
        }
      }
    }
  }
}

.article-main {
  display: flex;
  flex-direction: column;

  .article-list {
    margin-bottom: 5px;
    padding: 10px;
    background: #efeff4;
    display: flex;
    flex-direction: row;

    .article-pic {
      width: 24vw;
      height: 18vw;
    }

    .article-content {
      width: calc(100vw - 24vw - 20px);
      padding-left: 8px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .article-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        line-height: 20px;
        font-weight: bold;
      }

      .article-information {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        div {
          margin-right: 10px;
          font-size: 12px;
          color: #808080;
        }
      }
    }
  }
}
</style>
